<template>
	<view id="help" >
		<HeaderC txt="帮助"></HeaderC>
		<view-tabbar :current="2" v-if="isTabar"></view-tabbar>
		<view class="" v-if="alipay==true">
			<view class="texttop">
				<view v-bind:class="{'item':true, 'itm1':isA}" @click="goA">
					常见问题
					<view class="white1"></view><view class="white2"></view>
				</view>
				<view :class="{'item':true, 'itm1':isB}" @click="goB">
					购买须知
					<view class="white1"></view><view class="white2"></view>
				</view>
			</view>
			<view class="bg" v-if="isA">
				<view class="allP" v-for="(item,index) in dataList.list2" :key="index">
					<view class="itemP" @click="goGoodsPage(item.id)">
						<view class="titt">
							{{item.tittle}}
						</view>
						<view class="gotit">
							查看详情
						</view>
					</view>	
				</view>
			</view>
			<view class="bg" v-if="isB">
				<view class="allP" v-for="(item,index) in dataList.list1" :key="index">
					<view class="itemP" @click="goGoodsPage(item.id)">
						<view class="titt">
							{{item.tittle}}
						</view>
						<view class="gotit">
							查看详情
						</view>
					</view>	
				</view>
			</view>
		</view>
		<view class="" v-if="alipay==false">
			<view class="texttop">
				<view v-bind:class="{'item':true, 'itm1':isA}" @click="goA">
					常见问题
				</view>
				<view :class="{'item':true, 'itm1':isB}" @click="goB">
					购买须知
				</view>
			</view>
			<view class="bg" v-if="isA">
				<view class="allP" v-for="(item,index) in dataList.list2" :key="index">
					<view class="itemP" @click="goGoodsPage(item.id)">
						<view class="titt">
							{{item.tittle}}
						</view>
						<view class="gotit">
							查看详情
						</view>
					</view>	
				</view>
			</view>
			<view class="bg" v-if="isB">
				<view class="allP" v-for="(item,index) in dataList.list1" :key="index">
					<view class="itemP" @click="goGoodsPage(item.id)">
						<view class="titt">
							{{item.tittle}}
						</view>
						<view class="gotit">
							查看详情
						</view>
					</view>	
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchMenu:true,
				isShow:1,
				 list: [{
				         title: '常见问题'
				        }, {
				         title: '购买须知'
				       }],
				active:0,
				dataList: {
				        list1: [],
				        list2: [],
				        list3: [],
				        list4: []
				      },
				marqueeList: [],
				value2: "",
				result:[],
				alipay:true,
				isA:true,
				isB:false,
				isTabar:false,
			};
		},
		onShow() {
			this.listTitles()
			// #ifdef MP-ALIPAY
			this.alipay=false
			// #endif 
			// #ifdef MP-WEIXIN
				uni.hideTabBar({
					animation: false
				})
				this.isTabar=true
			// #endif
		},
		watch:{
		        active() {
					if(this.active==0){
						this.isShow=1
					}else if(this.active==1){
						this.isShow=2
					}
		        },
		    },
		methods:{
			goA(){
				this.isA=true
				this.isB=false
			},
			goB(){
				this.isB=true
				this.isA=false
			},
			ClickHandler(item){			
				this.searchMenu=false
				this.searchResult();
			},
			ClickHandler2(){
				this.searchMenu=true
			},
			getResult(val) {
			      if (!val) return [];
			      return this.marqueeList.filter(value => new RegExp(val, "i").test(value));
			    },
			searchResult(){
				
			},
			goGoodsPage(id) {
			      uni.navigateTo({
					  url:'/pagesB/tool/helpDel?id='+decodeURIComponent(`${id}`)})
			    },
			 getResult(val) {
			      if (!val) return [];
			      return this.marqueeList.filter(value => new RegExp(val, "i").test(value));
			    },
			listTitles(){
				let that = this;
				this.$store
				  .dispatch("ListTitles")
				  .then((response) => {			    
					that.dataList.list1 = [];
					that.dataList.list2 = [];
					that.dataList.list3 = [];
					that.dataList.list4 = [];
					// console.log(response[1].tittle)
					
					// console.log(response)
					response.splice(3,1)
					response.splice(3,1)
					response.splice(3,1)
					response.splice(3,1)
					let tar=response
					tar.forEach((item,index) => {
						if(item.id==71){
							console.log(1)
							tar.splice(index,1)
						}
						if(item.id==69){
							tar.splice(index,1)
						}
						if(item.id==54){
							console.log(1)
							tar.splice(index,1)
						}
						if(item.id==68){
							tar.splice(index,1)
						}
						if(item.id==1){
							tar.splice(index,1)
						}
						if(item.id==55){
							tar.splice(index,1)
						}
						if(item.id==62){
							tar.splice(index,1)
						}
						if(item.id==66){
							tar.splice(index,1)
						}				
					});
					tar.forEach(item => {
						that.dataList["list" + item.type].push(item);
					    that.marqueeList.push(item.tittle);
					});
				  })
				  .catch(() => {});
			}
		}
	}
</script>

<style lang="less" >
	#help{
		.searchList{
			padding: 0rpx 40rpx;
			.item{
				margin: 20rpx 0 40rpx;
			}
		}
		.texttop{
			.item{
				display: inline-block;
				width: 50%;
				text-align: center;
				padding: 20rpx 0;
				position: relative;
				.white1{
					position: absolute;
					width: 32%;
					height: 100%;
					background: #FFFFFF;
					top: 4rpx;
					left: 0;
				}
				.white2{
					position: absolute;
					width: 32%;
					height: 100%;
					background: #FFFFFF;
					top: 4rpx;
					right: 0;
				}
			}
			.itm1{
				color: #007AFF;		
				border-bottom: 4rpx solid #007AFF;
			}
			
		}
		.top{
			padding: 0rpx 40rpx;
			position: relative;
			.text{
				position: absolute;
				top: 16rpx;
				right: 40rpx;
				color: #4CD964;
			}
		}
		.search{			
			position: relative;
			width: 92%;
			display: inline-block;
			input{
				border-radius: 100rpx;
				height:77rpx;
				padding-left: 60rpx;
				background: #f5f6fa;
			}
			image{
				width: 36rpx;
				height: 40rpx;
				position: absolute;
				top:16rpx;
				left: 20rpx;
			}
		}
		
		.bg{
			background-color: #f5f5f5;
			
			.allP{
				padding-top: 20rpx;
				width: 92%;
				margin: 0rpx auto;
				.itemP{
					padding: 15rpx 20rpx 20rpx;
					background: #fff;
					.titt{
						font-size:30rpx;
						color: #333;
					}
					.gotit{
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>
